import { Button, message, Modal, Transfer } from 'antd'
import { useEffect, useState, useImperativeHandle } from 'react'
import { http } from '@/utils'
import { useStore } from '@/store'

const Tmptransfer = (props) => {
  const configModalOpenOk = () => {
    setConfigModalOpen(false)
  }
  const configModalOpenCancel = () => {
    setConfigModalOpen(false)
  }
  const closeModalOpen = () => {
    setLoading(true)
    const groups = [
      ...otherGroupArr,
      ...groupData.filter(item => targetKeys.indexOf(item.id) !== -1)
    ]
    http.post('/alarm/deliversign/addAlarmGroupIntoFeature', {
      userId: loginStore.userId,
      featureCode: configRow.featureCode,
      featureId: configRow.featureId,
      addNewGroups: groups
    }).then(res => {
      setLoading(false)
      message.success(res.body)
      setConfigModalOpen(false)
    })
    props.changeConfigModal('child msg')
  }
  const [configModalOpen, setConfigModalOpen] = useState(false)
  const [configRow, setConfigRow] = useState({})
  const [loading, setLoading] = useState(false)
  const [groupData, setGroupData] = useState([])
  const [targetKeys, setTargetKeys] = useState([])
  const [otherGroupArr, setOtherGroupArr] = useState([])
  const { loginStore } = useStore()
  // 父组件调用打开模态框
  useImperativeHandle(props.onRef, () => {
    return {
      openConfigModalOpen: openConfigModalOpen,
    }
  })
  const openConfigModalOpen = (data) => {
    setConfigModalOpen(true)
    setConfigRow({ ...data })
    // const groupArr = props.tabsData.map(item => {
    //   return {
    //     id: item.id,
    //     key: item.id,
    //     title: item.groupAlarmName,
    //     groupAlarmName: item.groupAlarmName,
    //     description: item.groupAlarmName,
    //   }
    // })
    // setGroupData(groupArr)
  }
  const filterOption = (inputValue, option) => option.description.indexOf(inputValue) > -1
  const handleChange = (newTargetKeys) => {
    setTargetKeys(newTargetKeys)
  }
  const handleSearch = (dir, value) => {
    // /alarm/deliversign/addAlarmGroupIntoFeature
    console.log('search:', dir, value)
  }
  const tagsDoubleClick = (data) => {
    if (!data.disabled) {
      if (targetKeys.indexOf(data.id) === -1) {
        setTargetKeys([...targetKeys, data.id])
      } else {
        setTargetKeys(targetKeys.filter(e => e !== data.id))
      }
    }
  }
  useEffect(() => {
    // 获取品种预警组
    const getGroup = async () => {
      const res = await http.post('/alarm/deliversign/getSelectedAndUnSelectedAlarmGroupByFeatureId', {
        userId: loginStore.userId,
        featureId: configRow.featureId,
        groupAlarmName: ""
      })
      // 已选预警组
      const selectedAlarmGroupByFeatureId = res.body.selectedAlarmGroupByFeatureId || []
      // 未选预警组
      const unSelectedAlarmGroupByFeatureId = res.body.unSelectedAlarmGroupByFeatureId || []
      let groupArr = []
      const otherArr = selectedAlarmGroupByFeatureId.filter(item => {
        if (+loginStore.userId === item.createdBy) {
          groupArr.push({
            id: item.id,
            key: item.id,
            title: item.groupAlarmName,
            groupAlarmName: item.groupAlarmName,
            description: item.groupAlarmName,
          })
        }
        return +loginStore.userId !== item.createdBy
      })
      setOtherGroupArr(otherArr.map(item => {
        return {
          id: item.id,
          key: item.id,
          disabled: true, // 只能操作创建人为自己的预警组
          title: item.groupAlarmName,
          groupAlarmName: item.groupAlarmName,
          description: item.groupAlarmName,
        }
      }))
      groupArr = [
        ...groupArr,
        ...unSelectedAlarmGroupByFeatureId.map(item => ({
          id: item.id,
          key: item.id,
          title: item.groupAlarmName,
          groupAlarmName: item.groupAlarmName,
          description: item.groupAlarmName,
        }))
      ]
      const newTargetKeys = selectedAlarmGroupByFeatureId.map(item => item.id)
      setGroupData(groupArr)
      setTargetKeys([...newTargetKeys])
      console.log('预警组', groupArr)
      console.log('品种所属预警组id', newTargetKeys)
    }
    if (configRow.featureCode && loginStore.userId) {
      // getTag()
      getGroup()
    }
  }, [configRow, loginStore])
  return (
    <>
      <Modal
        title={`配置预警组 ( ${configRow.featureName} ${configRow.featureCode} )`}
        open={configModalOpen}
        onOk={configModalOpenOk}
        onCancel={configModalOpenCancel}
        width={700}
        footer={[
          <Button key="submit" type="primary" loading={loading} onClick={closeModalOpen}>
            提交
          </Button>
        ]}
      >
        <Transfer
          dataSource={groupData}
          showSelectAll={false}
          titles={['未选预警组', '已选预警组']}
          filterOption={filterOption}
          targetKeys={targetKeys}
          listStyle={{ width: 300, height: 400, }}
          onChange={handleChange}
          onSearch={handleSearch}
          render={(item) => (
            <div onDoubleClick={() => tagsDoubleClick(item)}>{item.title}</div>
          )}
        />
      </Modal>
    </>
  )
}
export default Tmptransfer
